﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CompanyList.aspx.cs" Inherits="NX5Web.admin.CompanyData.CompanyList" %>



<div id="subApp" style="margin:15px;"> 


    <el-dialog
  v-model="dialogVisible"
  title="添加"
  width="500" 
>
  <div>
      <el-form ref="form" :model="form" :rules="rules" label-width="auto" style="max-width: 600px"> 
          <el-form-item label="名称" prop="CompanyName">
            <el-input v-model="form.CompanyName"/>
          </el-form-item>  
          <el-form-item label="类型" prop="CompanyType">
              <el-select v-model="form.CompanyType">
                    <el-option label="个体" value="1"></el-option>
                    <el-option label="企业" value="2" ></el-option>
                </el-select>
          </el-form-item>
         <%-- <el-form-item label="父级" prop="ParentId">
            <el-select v-model="form.ParentId">
                  <el-option label="总部" value="1"></el-option> 
                  <el-option v-for="(item,index) in CompanyList" :label="item.CompanyName" :value="item.CompanyName"></el-option> 
              </el-select>
        </el-form-item>--%>
           <el-form-item label="交付中心" v-if="mode=='new' && this.form.LicenceType == 2" prop="IsDLVCenter">
             <el-checkbox v-model="form.IsDLVCenter" label="是否设置为交付中心" />
           </el-form-item> 

            <%--<el-form-item label="授权模式" prop="LicenceType">
                <el-select v-model="form.LicenceType">
                      <el-option label="教师量限定模式" value="1"></el-option>
                      <el-option label="课程量限定模式" value="2" ></el-option>
                  </el-select>
                  <div style="font-size:12px;color:#aaa;    line-height: 20px;">教师量限定模式:创建老师有上限,但是课程量没有限制</div>
                  <div style="font-size:12px;color:#aaa;    line-height: 20px;">课程量限定模式:创建老师有上限,但是课程量没有限制</div>
                  <div style="font-size:12px;color:#f56c6c;    line-height: 20px;">此模式一旦确定无法修改</div>
            </el-form-item>--%>
           <el-form-item label="常规课量" v-if="mode=='new' && form.LicenceType==2" prop="StudentName">
               <el-input-number v-model="form.RememberLicence" :min="1"/>
             </el-form-item>  
             <el-form-item label="保温课量" v-if="mode=='new' && form.LicenceType==2" prop="StudentName">
               <el-input-number v-model="form.ReviewLicence" :min="1"/>
             </el-form-item>  

          <el-form-item label="教师授权量" v-if="mode=='new' && form.LicenceType==1" prop="TeacherCount">
                <el-input-number v-model="form.TeacherCount" :min="1"/>
              </el-form-item>  

          <el-form-item label="联系人" prop="Contact">
              <el-input v-model="form.Contact" />
            </el-form-item>  
          <el-form-item label="电话" prop="ContactPhone">
            <el-input v-model="form.ContactPhone" />
          </el-form-item>  
          <el-form-item label="分配账号" v-if="mode=='new'" prop="AccountPhone">
              <el-input v-model="form.AccountPhone" />
           </el-form-item>  
          <el-form-item label="有效期" prop="Period"> 
            <el-date-picker v-model="form.Period" type="date"></el-date-picker>
         </el-form-item>  
      </el-form>
  </div>
  <template #footer>
    <div class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="AddCompany()">
        确 定
      </el-button>
    </div>
  </template>
</el-dialog>

    <el-dialog
  v-model="showlicence"
  title="划拨授权"
  width="600" 
>
    <div>
        <el-form label-width="auto" style="max-width: 600px"> 
             
            <el-form-item label="常规课量" v-if="ActiveItem.LicenceType==2">
              <el-input-number v-model="RemeberLicence" :min="1"/>
            </el-form-item>  
            <el-form-item label="保温课量" v-if="ActiveItem.LicenceType==2">
              <el-input-number v-model="ReviewLicence" :min="1"/>
            </el-form-item>  
            <el-form-item label="教师授权量"  v-if="ActiveItem.LicenceType==1">
              <el-input-number v-model="TeacherLicence" :min="1"/>
            </el-form-item>  
        </el-form>
    </div>
    <div>
        <el-table :data="LicenceList" style="width: 100%">
            <el-table-column label="划拨时间" width="120" >
              <template #default="scope">{{ scope.row.Created }}</template>
            </el-table-column> 
            <el-table-column label="常规课量"  width="120" v-if="ActiveItem.LicenceType==2">
                <template #default="scope">{{ scope.row.UseRememberLicence }}节</template>
            </el-table-column> 
            <el-table-column label="保温课量"   width="120" v-if="ActiveItem.LicenceType==2">
                <template #default="scope">{{ scope.row.UseReviewLicence }}节</template>
            </el-table-column> 
            <el-table-column label="教师量"   width="120" v-if="ActiveItem.LicenceType==1">
                <template #default="scope">{{ scope.row.TeacherLicence }}个</template>
            </el-table-column> 
            <el-table-column label="说明" >
                <template #default="scope">{{ scope.row.Description }}</template>
            </el-table-column> 
        </el-table>
    </div>
    <template #footer>
        <div class="dialog-footer">
        <el-button @click="showlicence = false">取 消</el-button>
        <el-button type="primary" @click="AddLicence()">
            确 定
        </el-button>
        </div>
    </template>
    </el-dialog>

    <div style="    width: 100%;border-bottom: 1px solid #eee;padding-bottom: 5px;">
        <el-button type="primary" @click="showAddDia()">添 加</el-button> 
        <%--<el-button type="primary" @click="showAddDia()">导 出</el-button>--%> 
    </div>
    <div style="margin-top:10px;">
        <el-form :inline="true" :model="filterform" ref="filterform"> 
            <el-form-item label="名称" prop="Name">
                <el-input v-model="filterform.Name" placeholder="请输入校区名称"></el-input>
            </el-form-item> 
            <el-form-item label="类型" prop="CompanyType">
                <el-select v-model="filterform.CompanyType" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="个体" :value="1"></el-option>
                      <el-option label="企业" :value="2" ></el-option>
                  </el-select>
            </el-form-item>
            <el-form-item label="交付中心" prop="IsDLVCenter">
                <el-select v-model="filterform.IsDLVCenter" style="width:100px">
                      <el-option label="全部" :value="0"></el-option>
                      <el-option label="是" :value="1"></el-option>
                      <el-option label="否" :value="2" ></el-option>
                  </el-select>
            </el-form-item> 
             <el-form-item>
              <el-button type="primary" @click="resetFilter">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-table :data="tableData" style="width: 100%">
           <%--<el-table-column type="selection" width="55" ></el-table-column>--%>
           <el-table-column label="名称" width="120">
             <template #default="scope">{{ scope.row.CompanyName }}</template>
           </el-table-column>
           <el-table-column label="类型" width="120" >
               <template #default="scope">{{ scope.row.CompanyType==1?'个体':'企业' }}</template>
           </el-table-column>
            <%--<el-table-column label="授权模式" width="120" >
                <template #default="scope">{{ scope.row.LicenceType==1?'按教师量':'按课时量' }}</template>
            </el-table-column>--%>
            <el-table-column label="交付中心" width="90" >
                <template #default="scope">{{ scope.row.IsDLVCenter==1?'是':'否' }}</template>
            </el-table-column>
            
           <el-table-column label="联系人">
               <template #default="scope">{{ scope.row.Contact }}</template>
           </el-table-column>
           <el-table-column label="电话 / 账号">
                <template #default="scope">{{ scope.row.ContactPhone == scope.row.UserName?scope.row.UserName:(scope.row.ContactPhone+'/'+scope.row.UserName) }}</template>
            </el-table-column> 
            <el-table-column label="授权余量">
              <template #default="scope">
                  <div v-if="scope.row.LicenceType==2">{{ scope.row.RemeberLicence }}正课/{{ scope.row.ReviewLicence }}保温</div>
                  <div v-if="scope.row.LicenceType==1">{{ scope.row.TeacherLicence }}个</div>
              </template>
            </el-table-column> 
            <el-table-column label="有效期">
                 <template #default="scope">{{ dateFormat(scope.row.Period) }}</template>
             </el-table-column>
            <%--<el-table-column label="创建日期">
                 <template #default="scope">{{ dateFormat(scope.row.Created) }}</template>
             </el-table-column>--%>
           <el-table-column label="" width="220">
      <template #default="scope">
        <el-button size="small" v-if="scope.row.Valid" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button size="small" v-if="scope.row.Valid" @click="assignLicence(scope.$index, scope.row)">
           划拨
         </el-button>
        <el-button  v-if="scope.row.Valid"
          size="small"
          type="danger"
          @click="delCompany(scope.$index, scope.row)"
        >
          停用
        </el-button>
          <el-button  v-if="!scope.row.Valid"
              size="small"
              type="danger"
              @click="ResetCompany(scope.$index, scope.row)"
            >
              启用
            </el-button>
      </template>
    </el-table-column>
        </el-table>

        <div style="margin-top:10px;">
            <el-pagination
              v-model:current-page="pageIndex"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              @size-change="pageSizeChange"
              @current-change="pageNumberChange"
            />
        </div>
        
         
    </div> 
</div>
<script> 
    var subApp = createApp({
        el: '#subApp',
        data() {
            return {
                totalCount: 0,
                pageIndex: 1,
                pageSize: 10,

                mode: 'new',
                filterform: {
                    Name: null,
                    LicenceType:null,
                    CompanyType: 0,
                    IsDLVCenter: 0
                },
                form: {
                    CompanyName: "",
                    CompanyType: null,
                    IsDLVCenter: false,
                    //ParentId:null,
                    Contact: "",
                    Period: "",
                    TeacherCount: 0,
                    RememberLicence: 0,
                    LicenceType: null,
                    ReviewLicence: 0,
                    ContactPhone: "",
                    AccountPhone: ""
                },
                rules: {
                    CompanyName: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' }
                    ],
                    LicenceType: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    CompanyType: [
                        { required: true, message: '', trigger: 'change' }
                    ],
                    //ParentId: [
                    //    { required: true, message: '', trigger: 'change' }
                    //],
                    Contact: [
                        { required: true, message: '', trigger: 'blur' }
                    ],
                    Period: [
                        { type: 'date', required: true, message: '', trigger: 'change' }
                    ],
                    ContactPhone: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 11, max: 11, message: '无效电话', trigger: 'blur' }
                    ],
                    AccountPhone: [
                        { required: true, message: '', trigger: 'blur' },
                        { min: 11, max: 11, message: '请输入11位手机号', trigger: 'blur' }
                    ],
                },
                dialogVisible: false,
                showlicence: false,
                RemeberLicence: 0,
                ReviewLicence: 0,
                TeacherLicence:0,
                ActiveItem: null,
                CompanyList: [],
                LicenceList: []
            };
        },
        computed: { 
            tableData() { 
                var temp = this.CompanyList.filter(x => {
                    return (
                        (this.filterform.Name == null || x.CompanyName.indexOf(this.filterform.Name) != -1)
                        && (this.filterform.LicenceType == null || x.LicenceType == this.filterform.LicenceType)
                        && (this.filterform.CompanyType == 0 || x.CompanyType == this.filterform.CompanyType)
                        && (this.filterform.IsDLVCenter == 0 || x.IsDLVCenter == (this.filterform.IsDLVCenter==1?true:false))
                    );
                });  

                this.totalCount = temp.length;
                 
                return temp.slice((this.pageIndex - 1) * this.pageSize, this.pageIndex * this.pageSize);
            }, 
        },
        methods: { 
            resetFilter() {
                this.$refs.filterform.resetFields()
            },
            pageNumberChange(pageIndex) {
                this.pageIndex = pageIndex;
            },
            pageSizeChange(pageSize) {
                this.pageIndex = 1;
                this.pageSize = pageSize;
            },

            AddLicence() {
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "action": "Cus_AddCompanyLicence",
                    "data": { 
                        "CompanyId": this.ActiveItem.ID,
                        "FromCompany": user.userInfo().CompanyId,
                        "Rember": this.RemeberLicence,
                        "Review": this.ReviewLicence,
                        "Teacher": this.TeacherLicence
                    }
                }).then(res => {
                    if (res.data[0]["code"] == 0) {
                        MsgBox.error(res.data[0]["err"]);
                        return;
                    }
                    this.ActiveItem["RemeberLicence"] += this.ReviewLicence;
                    this.ActiveItem["ReviewLicence"] += this.ReviewLicence;
                    this.ActiveItem["TeacherLicence"] += this.TeacherLicence;
                    this.showlicence = false;
                    loaddingPlus(false);
                });
            },
            assignLicence(index, row) {
                this.ActiveItem = row;

                loaddingPlus(true); 
                ktlapi({
                    "action": "CompanyLicenseHis",
                    "data": {
                        "CompanyId": this.ActiveItem.ID 
                    }
                }).then(res => {
                    console.log(res); 
                    this.LicenceList = res.data;
                    this.showlicence = true;
                    loaddingPlus(false);
                }); 
            },
            handleEdit(index, row) { 
                this.mode = 'edit';
                this.ActiveItem = row;
                this.form.CompanyName = row["CompanyName"];
                this.form.CompanyType = row["CompanyType"].toString();
                this.form.Contact = row["Contact"];
                this.form.ContactPhone = row["ContactPhone"];
                this.form.Period = row["Period"];
                this.dialogVisible = true;
            },
            isValidPhoneNumber(phoneNumber) {
                // 中国大陆手机号（简化）
                const chinaRegex = /^1[3-9]\d{9}$/;
                // 美国手机号（简化）
                const usRegex = /^(\+?1\s?)?(\d{3})[-.]?(\d{3})[-.]?(\d{4})$/;
                // 英国手机号（简化）
                const ukRegex = /^(\+?44\s?7\d{3}|\(?07\d{3}\)?)\s?\d{3}\s?\d{3}$/;

                return chinaRegex.test(phoneNumber) || usRegex.test(phoneNumber) || ukRegex.test(phoneNumber);
            },
            AddCompany() {
                this.$refs.form.validate((valid, fields) => {
                    var user = new ktluser();
                    var proc = '';
                    var data = {};
                    if (this.mode == 'new') {
                        if (!this.isValidPhoneNumber(this.form.ContactPhone) || !this.isValidPhoneNumber(this.form.AccountPhone)) {
                            MsgBox("手机号无效");
                            return;
                        }
                        proc = 'Cus_AddCompany';
                        data = {
                            "CompanyName": this.form.CompanyName,
                            "CompanyType": this.form.CompanyType,
                            "Contact": this.form.Contact,
                            "IsDLVCenter": this.form.IsDLVCenter?1:0,
                            "ParentAccountId": user.userInfo().AccountID,
                            "RememberLicence": this.form.RememberLicence,
                            "ReviewLicence": this.form.ReviewLicence,
                            "TeacherLicence": this.form.TeacherCount,
                            "ContactPhone": this.form.ContactPhone,
                            "Period": dateFormat(this.form.Period),
                            "UserName": this.form.AccountPhone
                        };
                    } else {
                        if (!this.isValidPhoneNumber(this.form.ContactPhone)) {
                            MsgBox("手机号无效");
                            return;
                        }
                        proc = 'Cus_EditCompany';
                        data = {
                            "ID": this.ActiveItem.ID,
                            "CompanyName": this.form.CompanyName,
                            "CompanyType": this.form.CompanyType,
                            "Contact": this.form.Contact, 
                            "ContactPhone": this.form.ContactPhone, 
                            "Period": dateFormat(this.form.Period),
                        };
                    }

                    if (valid) {
                        loaddingPlus(true);
                        var user = new ktluser();
                        ktlapi({
                            "action": proc,
                            "data": data
                        }).then(res => { 
                            if (this.mode == 'new') {
                                if (res.data[0]["code"] == 0) {
                                    MsgBox.error(res.data[0]["err"]);
                                    return;
                                }
                                this.loadCompany();
                            } else {
                                this.ActiveItem["CompanyName"] = this.form.CompanyName;
                                this.ActiveItem["CompanyType"] = this.form.CompanyType;
                                this.ActiveItem["Contact"] = this.form.Contact;
                                this.ActiveItem["ContactPhone"] = this.form.ContactPhone;
                                this.ActiveItem["Period"] = this.form.Period;
                            }
                            this.dialogVisible = false;
                            this.$refs.form.resetFields()
                            loaddingPlus(false);
                        }); 
                    } else {
                        console.log('error submit!', fields)
                    }
                }) 
            },
            ResetCompany(index, row) {
                if (window.confirm("是否启用该条目?")) {
                    loaddingPlus(true);
                    ktlapi({
                        "action": "Cus_ResetCompany",
                        "data": {
                            "ID": row.ID
                        }
                    }).then(res => {
                         
                        row.Valid = true;
                        loaddingPlus(false);
                    });
                }
            },
            delCompany(index,row) {
                if (window.confirm("是否停用该条目?")) {
                    loaddingPlus(true);
                    ktlapi({
                        "action": "Cus_DelCompany",
                        "data": {
                            "ID":row.ID
                        }
                    }).then(res => {
                        //for (var i = 0; i < this.CompanyList.length; i++) {
                        //    if (this.CompanyList[i]["ID"] == row.ID) {
                        //        this.CompanyList.splice(i, 1);
                        //        break;
                        //    }
                        //}
                        row.Valid = false;

                        loaddingPlus(false);
                    });
                }
            },
            handleDelete(index,row) {
                console.log(index, row)
            },
            showAddDia() {
                this.mode = 'new';
                loaddingPlus(true);
                var user = new ktluser();
                ktlapi({
                    "action": "GetCompanyLicenceType",
                    "data": {
                        "CompanyId": user.userInfo().CompanyId
                    }
                }).then(res => {
                    this.dialogVisible = true;
                    this.form.LicenceType = res.data[0]["LicenceType"];
                    if (this.form.LicenceType == 1) {
                        this.form.IsDLVCenter = true;
                    }
                    loaddingPlus(false);
                }); 
            },
            loadCompany() {
                var user = new ktluser(); 
                loaddingPlus(true);
                ktlapi({
                    "action": "Cus_GetMyCompanyList",
                    "data": {
                        "AccountID": user.userInfo().AccountID
                    }
                }).then(res => {
                    this.CompanyList = res.data;
                    loaddingPlus(false);
                });
            },
            init() {
                this.loadCompany();
            }
        },
        mounted: function () {
            this.init();
        }
    });
</script>